<template>
  <div class="snake-game">
    <canvas ref="gameCanvas" :width="canvasWidth" :height="canvasHeight"></canvas>
    <div class="score-board">
      <p>Score: {{ score }}</p>
      <p>High Score: {{ highScore }}</p>
    </div>
    <div class="controls">
      <button @click="startGame" :disabled="gameStarted">Start</button>
      <button @click="pauseGame" :disabled="!gameStarted || gamePaused">Pause</button>
      <button @click="continueGame" :disabled="!gameStarted || !gamePaused">Continue</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SnakeGame',
  data() {
    return {
      canvasWidth: 400,
      canvasHeight: 400,
      snake: [{ x: 200, y: 200 }],
      food: { x: 0, y: 0 },
      direction: 'RIGHT',
      interval: null,
      speed: 250,
      scale: 20,
      score: 0,
      highScore: 0,
      gameStarted: false,
      gamePaused: false
    };
  },
  mounted() {
    this.createFood();
    window.addEventListener('keydown', this.changeDirection);
  },
  beforeDestroy() {
    window.removeEventListener('keydown', this.changeDirection);
    clearInterval(this.interval);
  },
  methods: {
    startGame() {
      if (!this.gameStarted) {
        this.initGame();
        this.gameStarted = true;
        this.gamePaused = false;
      }
    },
    pauseGame() {
      if (this.gameStarted && !this.gamePaused) {
        clearInterval(this.interval);
        this.gamePaused = true;
      }
    },
    continueGame() {
      if (this.gameStarted && this.gamePaused) {
        this.interval = setInterval(this.updateGame, this.speed);
        this.gamePaused = false;
      }
    },
    initGame() {
      this.snake = [{ x: 200, y: 200 }];
      this.direction = 'RIGHT';
      this.score = 0;
      this.createFood();
      this.interval = setInterval(this.updateGame, this.speed);
    },
    updateGame() {
      const head = { ...this.snake[0] };

      switch (this.direction) {
        case 'UP':
          head.y -= this.scale;
          break;
        case 'DOWN':
          head.y += this.scale;
          break;
        case 'LEFT':
          head.x -= this.scale;
          break;
        case 'RIGHT':
          head.x += this.scale;
          break;
      }

      this.snake.unshift(head);

      if (head.x === this.food.x && head.y === this.food.y) {
        this.createFood();
        this.score += 10;
        if (this.score > this.highScore) {
          this.highScore = this.score;
        }
      } else {
        this.snake.pop();
      }

      if (this.checkCollision(head)) {
        clearInterval(this.interval);
        alert('Game Over!');
        this.$emit('game-over');
        this.initGame();
        this.gameStarted = false;
        this.gamePaused = false;
      }

      this.draw();
    },
    draw() {
      const ctx = this.$refs.gameCanvas.getContext('2d');
      ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);

      // Draw background
      ctx.fillStyle = '#f0f0f0';
      ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight);

      // Draw snake
      ctx.fillStyle = 'green';
      this.snake.forEach(segment => {
        ctx.fillRect(segment.x, segment.y, this.scale, this.scale);
      });

      // Draw food
      ctx.fillStyle = 'red';
      ctx.fillRect(this.food.x, this.food.y, this.scale, this.scale);
    },
    createFood() {
      this.food = {
        x: Math.floor(Math.random() * (this.canvasWidth / this.scale)) * this.scale,
        y: Math.floor(Math.random() * (this.canvasHeight / this.scale)) * this.scale
      };
    },
    changeDirection(event) {
      const keyPressed = event.keyCode;

      const goingUp = this.direction === 'UP';
      const goingDown = this.direction === 'DOWN';
      const goingRight = this.direction === 'RIGHT';
      const goingLeft = this.direction === 'LEFT';

      if (keyPressed === 37 && !goingRight) {
        this.direction = 'LEFT';
      }

      if (keyPressed === 38 && !goingDown) {
        this.direction = 'UP';
      }

      if (keyPressed === 39 && !goingLeft) {
        this.direction = 'RIGHT';
      }

      if (keyPressed === 40 && !goingUp) {
        this.direction = 'DOWN';
      }
    },
    checkCollision(head) {
      if (head.x < 0 || head.x >= this.canvasWidth || head.y < 0 || head.y >= this.canvasHeight) {
        return true;
      }

      for (let i = 1; i < this.snake.length; i++) {
        if (head.x === this.snake[i].x && head.y === this.snake[i].y) {
          return true;
        }
      }

      return false;
    }
  }
};
</script>

<style scoped>
.snake-game {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  background-color: #e0e0e0;
}

canvas {
  border: 1px solid #ccc;
  margin-bottom: 20px;
}

.score-board {
  display: flex;
  justify-content: space-around;
  width: 100%;
  max-width: 400px;
  font-size: 1.2em;
  color: #333;
  margin-bottom: 20px;
}

.controls {
  display: flex;
  justify-content: space-around;
  width: 100%;
  max-width: 400px;
}

button {
  padding: 10px 20px;
  font-size: 1em;
  cursor: pointer;
  border: none;
  border-radius: 5px;
  background-color: #42b983;
  color: white;
  transition: background-color 0.3s;
}

button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

button:hover:not(:disabled) {
  background-color: #3498db;
}
</style>